<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>colormaps</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <label for="invertCheck">Invert</label>
      <input type="checkbox" id="invertCheck" unchecked />
      <label for="curveSlider">Curvature</label>
      <input
        type="range"
        min="0"
        max="10"
        value="7"
        class="slider"
        id="curveSlider"
      />
      <label for="opacitySlider">Opacity</label>
      <input
        type="range"
        min="0"
        max="10"
        value="7"
        class="slider"
        id="opacitySlider"
      />
      <button id="saveBmp">Save Bitmap</button>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="colormaps"></label>
    </footer>
  </body>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js";
  invertCheck.onchange = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "colormapInvert", this.checked);
    nv1.updateGLVolume();
  };
  curveSlider.onchange = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 0, "opacity", this.value * 0.1);
  }
  opacitySlider.onchange = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "opacity", this.value * 0.1);
  }
  document.getElementById("saveBmp").addEventListener("click", doSaveBmp);
  function doSaveBmp() {
    nv1.saveScene("ScreenShot.png");
  }
  var meshLHLayersList1 = [
    {
      url: "../images/BrainMesh_ICBM152.lh.curv",
      colormap: "gray",
      cal_min: 0.3,
      cal_max: 0.5,
      opacity: 0.7,
    },
    {
      url: "../images/BrainMesh_ICBM152.lh.motor.mz3",
      cal_min: 1.64,
      cal_max: 5,
      colormap: "warm",
      colormapNegative: "winter",
      useNegativeCmap: true,
      opacity: 0.7,
    },
  ];
  var nv1 = new niivue.Niivue({ backColor: [0.3, 0.3, 0.3, 1] });
  let cmaps = nv1.colormaps();
  let cmapEl = document.getElementById("colormaps");
  for (let i = 0; i < cmaps.length; i++) {
    let btn = document.createElement("button");
    btn.innerHTML = cmaps[i];
    btn.onclick = function () {
      nv1.setMeshLayerProperty(nv1.meshes[0].id, 1, "colormap", cmaps[i]);
      nv1.updateGLVolume();
    };
    cmapEl.appendChild(btn);
  }
  await nv1.attachTo("gl1");
  nv1.opts.isColorbar = true;
  await nv1.loadMeshes([
    { url: "../images/BrainMesh_ICBM152.lh.mz3", layers: meshLHLayersList1 },
  ]);
  nv1.setMeshLayerProperty(nv1.meshes[0].id, 0, "colorbarVisible", false);
</script>
